<template>
  <!-- 科技人员库管理 -->
  <base-breadcrumb>
    <searchData ref="searchArr" :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      <a-row :gutter="10">
        <a-col :span="24">
          <list-table ref="table" class="export-table" :columns="columns" :request="loadData">
            <template slot="prefix" slot-scope="ref">
              <a-button v-btnPermission="'stm_014_add_01'" :loading="addLoading" type="primary" @click="showAddModal('add')">
                新增
              </a-button>
            </template>
            <span slot="content" slot-scope="text, record, index">
              <a-popover placement="bottomLeft" v-for="item in record.fileInfos">
              <template #content>
                <a-button type="link"> <a :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId">下载</a></a-button>
                <a-divider type="vertical" />
                <a-button type="link" href="javascript:" @click="$filePreview(item)">查看</a-button>
              </template>
              <a-button type="link">{{ item.fileName ? item.fileName : '' }}</a-button>
            </a-popover>
            </span>
            <!-- 表格行操作栏 -->
            <span slot="action" slot-scope="text, record">
              <MoreButton>
                <a v-btnPermission="'stm_014_loo_04'" @click="showAddModal('look', record.id)">查看</a>
                <a-divider v-btnPermission="'stm_014_edi_02'" type="vertical" />
                <a @click="showAddModal('edit', record.id)" v-btnPermission="'stm_014_edi_02'">编辑</a>
                <a-divider type="vertical" v-btnPermission="'stm_014_del_03'" />
                <a @click="remove(record.id)" v-btnPermission="'stm_014_del_03'">删除</a>
              </MoreButton>
            </span>
          </list-table>
        </a-col>
      </a-row>
    </a-card>

    <!-- add modal start -->
    <addModal :visible.sync="addModalVisible" :modal-type="addModalType" :editId="editId" @submitForm="search" />
    <!-- :form-data="formData"
      @cancelSub="hideAddModal"
      @submitForm="showAddModal" -->
    <!-- add modal end -->
  </base-breadcrumb>
</template>

<script>
import ExportMould from '@/components/ExportMould'
import { STable } from '@/components' // 表格
import addModal from './addmodal.vue'
import { outerDel, outerCreates } from '@/api/science'
import { caseList, caseDel } from '@/api/achievementsManage'
import SelectAchievementType from '@/components/Select/SelectAchievementType' // 成果分类
import SelectAchievementLevel from '@/components/Select/SelectAchievementLevel' // 成果等级
import Vue from 'vue'

const columns = [
  // {
  //     title: '序号',
  //     width: '80px',
  //     scopedSlots: {customRender: 'index'},
  // },
  {
    title: '成果等级',
    ellipsis: true,
    width: 150,
    dataIndex: 'achievementsLevelName'
  },
  {
    title: '成果分类',
    ellipsis: true,
    width: 150,
    dataIndex: 'achievementClassifyName'
  },
  {
    title: '附件信息',
    dataIndex: 'content',
    ellipsis: true,
    width: 500,
    scopedSlots: { customRender: 'content' },
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    addModal,
    ExportMould
  },
  computed: {},
  data() {
    this.columns = columns
    // this.searchArr = searchArr
    return {
      searchArr: [
        // 搜索框
        {
          name: '成果分类',
          valueKey: 'achievementClassifyId', // 这里用的表单是id，因为成果等级是根据成果分类id查询的，但是搜索又要用到成果分类名称，很奇葩，但是没办法，所以这里用id
          placeholder: '请选择',
          type: SelectAchievementType,
          replaceFields: {
            name: 'name',
            key: 'id'
          },
          listeners: {
            change: (e, VNODE) => {
              this.achievementClassify = VNODE?.componentOptions.children[0]?.text
              // 重置成果等级
              this.$refs?.searchArr.form.resetFields(['achievementsLevelId'])
            }
          }
        },
        {
          name: '成果等级',
          placeholder: '请选择',
          valueKey: 'achievementsLevelId',
          keyValue: 'achievementClassifyId',
          type: SelectAchievementLevel,
          replaceFields: {
            name: 'levelName',
            key: 'id'
          },
        }
      ],
      token: '',
      addModalVisible: false,
      addModalType: 'add',
      editId: null,
      loading: false,
      addLoading: false,
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      // 责任区域弹窗控件
      // 弹窗参数
      form: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let that = this
        const requestParameters = Object.assign({}, parameter, {query:that.queryParam})
        return caseList(requestParameters).then(res => {
          return res
        })
      },
      result: {}, // 查看参数对象
      boxHeight: 0, // 盒子高度
      personIds: [],
      achievementClassify: '' //成果分类
    }
  },
  mounted() {
    this.token = Vue.getAcloudProvider().getAccessToken()
  },
  methods: {
    showAddModal(type, id = null) {
      this.addModalVisible = true
      this.addModalType = type || ''
      this.editId = id || ''
      this.$forceUpdate()
    },
    remove(id) {
      console.log('id', id)
      let that = this
      that.$confirm({
        title: '提示',
        content: '确定是否删除？',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          return caseDel(id).then(res => {
            if (res.msg == '成功') {
              that.$message.success('删除成功！')
              that.$refs.table.getData(null, true)
            }
          })
        }
      })
    },
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
      }
      this.$refs.table.getData(null, true)
    },
    // 提交表单
    submitForm(e) {
      let that = this
      that.$confirm({
        title: '提示',
        content: '确认添加？',
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return addSciencesList(e).then(res => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('添加成功！')
              that.$refs.table.getData(null, true)
            }
          })
        }
      })
    },
    downLoad() {},

    // 查看
    handleManage(b) {
      this.$router.push({ path: '/science/employer/detail', query: { id: b.employeeId } })
      // this.$router.push({
      //   name: 'expertEdit',
      //   params: b,
      // })
    }
  }
}
</script>
<style lang="less">
.export-table .ant-table-fixed-right .ant-table-expanded-row {
  height: 156px;
}
</style>
